<template>
  <div>
    <!-- 头部搜索和轮播图 -->
    <div class="header_search_box">
      <!-- 输入框 -->
      <van-search
        v-model="searchValue"
        shape="round"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
      >
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
    </div>
    <!-- 下拉选择 -->
    <van-dropdown-menu active-color="#1989fa">
      <van-dropdown-item v-model="value1" :options="option1" @change="change" />
      <van-dropdown-item v-model="value2" :options="option2" />
      <van-dropdown-item v-model="value3" :options="option3" />
    </van-dropdown-menu>
    <div class="goods_list">
      <van-pull-refresh
        v-model="isLoading"
        @refresh="onRefresh"
        success-text="刷新成功"
      >
        <van-list
          class="clearfloat"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <router-link
            :to="{
              name: 'goodsid',
              params: { id: item.goodsId },
              query: {
                data: goodsList[index],
              },
            }"
            class="goods_item"
            v-for="(item, index) in goodsList"
            :key="item.goodsId"
          >
            <!-- 图片 -->
            <!-- <div class="goods_pic">
              <img :src="item.picUrl" alt="" />
            </div> -->
            <GoodsPic :picid="item.goodsId"></GoodsPic>
            <!-- 内容 -->
            <div class="goods_cont">
              <div class="goods_title">
                {{ item.goodsTitle }}
              </div>
              <div class="goods-price dislay-flex">
                <div class="price">
                  <span class="left">￥</span
                  ><span class="right">{{ item.price }}</span>
                </div>
                <div class="tab">{{ item.chengseId }}</div>
              </div>
            </div>
            <!-- 发布员 -->
            <div class="goods-user dislay-flex">
              <!-- <div class="goods-user_left">
                <img class="user" :src="item.userInfo.userQurl" /><span
                  class="num"
                  >{{ item.userInfo.usernaema }}</span
                >
              </div> -->
              <GoodsUser :id="item.userId"></GoodsUser>
              <div class="goods-user_right">
                <span>{{ item.nowaddTime }}</span>
              </div>
            </div>
          </router-link>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Toast } from "vant";
import { Notify } from "vant";
import GoodsUser from "/src/components/goodsUser";
import GoodsPic from "/src/components/goodsPic";
Vue.use(Toast);
export default {
  name: "goods",
  components: { GoodsUser, GoodsPic },
  directives: {},

  data() {
    return {
      // 搜索类容
      searchValue: "",
      // 筛选选择器
      value1: 0,
      id: 3,
      value2: "a",
      value3: "aa",
      option1: [],
      option2: [
        { text: "年级", value: "a" },
        { text: "高一", value: "b" },
        { text: "高二", value: "c" },
        { text: "高三", value: "d" },
      ],
      option3: [
        { text: "地区", value: "aa" },
        { text: "华强", value: "bb" },
        { text: "北一中", value: "cc" },
      ],

      loading: true,
      finished: true,
      // 商品goods列表
      goodsList: [],
      isLoading: false,
    };
  },
  mounted() {},
  created() {
    if (this.$route.params.id) {
      this.value1 = this.$route.params.id;
    } else {
      this.value1 = 0;
    }
    if (localStorage.getItem("id")) {
      if (localStorage.getItem("goodsList")) {
        this.goodsList = JSON.parse(localStorage.getItem("goodsList"));
      } else {
        this.getAllGoods();
      }
      // //console.log(this.$router);
      if (localStorage.getItem("option1")) {
        this.option1 = JSON.parse(localStorage.getItem("option1"));
      } else {
        this.getCateList();
      }
    } else {
      Notify({ type: "danger", message: "请登录" });
      this.$router.push({ name: "my" });
    }
  },
  methods: {
    change() {
      this.getAllGoods();
    },
    onRefresh() {
      this.getAllGoods();
    },
    onSearch() {},
    onLoad() {},
    // async getGoodslist() {
    //   const { data: res } = await this.$http.get("/api/goods/list");
    //   //console.log(res);
    // },
    async getCateList() {
      const { data: res } = await this.$http.get("/api/cate/all");
      //console.log(res);
      let arr = [{ text: "全部商品", value: 0 }];
      for (let i = 0; i < res.data.length; i++) {
        let objarr = { text: res.data[i].cateName, value: res.data[i].cateId };
        arr.push(objarr);
      }
      this.option1 = arr;
      localStorage.setItem("option1", JSON.stringify(this.option1));
      //console.log(arr);
    },
    // 获取商品列表
    async getAllGoods() {
      let data = {};
      if (this.value1 === 0) {
        data = {
          finish: 0,
          status: 1,
        };
      } else {
        data = {
          finish: 0,
          status: 1,
          cateId: this.value1,
        };
      }

      const { data: res } = await this.$http.get("/api/goods/list", {
        params: data,
      });
      //console.log(res);
      this.geshiLists(res);
      this.goodsList = res.data.reverse();
      localStorage.setItem("goodsList", JSON.stringify(this.goodsList));
      this.isLoading = false;
    },
    // 处理goodslist
    geshiLists(res) {
      let that = this;
      for (let i = 0; i < res.data.length; i++) {
        res.data[i].nowaddTime = that.$moment(res.data[i].addTime).fromNow();
        res.data[i].addTime = that.$moment(res.data[i].addTime).format("MM-DD");
        res.data[i].chengseId = this.chengsefilter(res.data[i].chengseId);
        // userID转用户名
        // res.data[i].userInfo = that.getUsername(res.data[i].userId);

        // qq转头像
        res.data[i].qqurl = localStorage.getItem("userurl");
        // res.data[i].picUrl = that.getPic(res.data[i].goodsId, 1, i);
      }
    },

    // 处理成色
    chengsefilter(id) {
      let arr = "";
      switch (id) {
        case 0:
          arr = "低于五成新";
          break;
        case 1:
          arr = "五成新";
          break;
        case 2:
          arr = "六成新";
          break;
        case 3:
          arr = "七成新";
          break;
        case 4:
          arr = "八成新";
          break;
        case 5:
          arr = "九成新";
          break;
        case 6:
          arr = "全新";
          break;
      }
      return arr;
    },
  },
};
</script>

<style lang="less" scoped>
.goods_list {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 52px;
  top: 103px;
  overflow-y: auto;
}
.goods_item {
  border-radius: 8px;
  width: calc(50% - 15px);
  background: #fff;
  overflow: hidden;
  max-width: 368px;
  float: left;
  position: relative;
  margin: 0 0px 7px 7px;
}
.goods_pic {
  position: relative;
  width: 100%;
  height: calc((100vw - 50px) / 2);
  max-width: 368px;
  max-height: 368px;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.goods_cont {
  padding: 0 5px;
}
.goods_title {
  margin: 10px 0;
  font-size: 14px;
  line-height: 18px;
  height: 35px;
  max-height: 35px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #000;
}
.dislay-flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.goods-price .price {
  line-height: 32px;
  color: red;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  .left {
    font-size: 15px;
  }
  .right {
    font-size: 20px;
  }
}
.tab {
  border: 1px solid #507eff;
  padding: 0px 5px;
  color: #507eff;
  font-size: 14px;
  border-radius: 5px;
  margin-right: 2px;
  height: 27px;
  margin-top: 5px;
  line-height: 27px;
}
.goods-user {
  padding-top: 5px;
  padding-bottom: 3px;
  line-height: 30px;
  color: #9c9c9c;
  font-size: 14px;
}
.goods-user_left {
  width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 5px;
}
.goods-user_right {
  flex: 1;
  text-align: right;
  padding-right: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
img.user {
  width: 25px;
  height: 25px;
  border-radius: 50px;
  vertical-align: -7px;
}
.goods-user_left span {
  padding-left: 5px;
}
.clearfloat {
  zoom: 1;
}
.clearfloat:after {
  display: block;
  clear: both;
  content: "";
  visibility: hidden;
  height: 0;
}

/deep/ .van-list__finished-text {
  float: left;
  width: 100%;
}
/deep/ .van-list__error-text {
  float: left;
  width: 100%;
}
/deep/ .van-list__loading {
  float: left;
  width: 100%;
}
.doge {
  width: 100px;
  height: 100px;
  margin-top: 4px;
  margin-bottom: 14px;
  border-radius: 4px;
}
</style>